<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用creatRef 管理refs</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="./yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="./yl/prop-types.js"></script>

</head>
<body>

<!--
refs 就是react框架里面的id
因为一个组件包含了需求其他组件，所以站在整体来看就是多个ref就是refs
refs.具体的ref名就获取到了具体的html标签。
refs分三种形式
字符串形（不推荐）
createRef形
creatRef 是一个容器，该容器存储被re所标记的节点，一个容器只能存储一个节点信息。一对一的。
如果被多次使用，后面的会覆盖前面的
ref不要过度使用，发生事件的元素与操作事件的元素是同一个元素时，可以省略。
-->
<div id="app"></div>
<script type="text/babel">
    class Person extends React.Component {
       // 存对象的变量
       myInput= React.createRef();
       //事件处理函数回调，会默认传递触发当前事件的事件对象
       showContent= event=>{
           console.log(event)
           //通过事件对象获取事件源，事件源就是事件发生节点对象，
           console.log(event.target.value)
       }
        render() {
            return <div>
                <button ref="bu1" onClick={() => {
                    console.log(this.myInput.current.value)
                }
                }>我是按钮</button>
                <br/>
                <label>
                    使用creatRef 管理refs<br/>
                    <input ref={this.myInput} /><br/>
                    <input onBlur={this.showContent}/>
                </label>
            </div>
        }
    }

    ReactDOM.render(<Person age="16" name="123"/>, document.getElementById('app'))
</script>
</body>
</html>
